<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="../js/vue.js"></script>
	<style>
		/* 定义提示框的基础样式 */
		.message {
			display: inline-block;
			width: 160px;
			height: 24px;
			border: 1px solid #555;
			text-align: center;
			line-height: 24px;
		}

		/* 定义提示框在验证通过时的样式 */
		.success {
			border: 1px solid green;
			background-color: lightgreen;
			color: green;
		}

		/* 定义提示框在验证失败时的样式 */
		.msg-fail {
			border: 1px solid red;
			background-color: pink;
			color: red;
		}
	</style>
</head>

<body>
	<div id="app">
		<span>电话号码：{{cellphone}}</span>
		<!-- 提示框的样式会变化，部分class需要属性绑定,提示内容会变化，需要{{}}绑定 -->
		<!--样式和内容，都和验证结果这一个数据有关！所有，其实只用一个变量就可控制了-->
		<span class="message" :class="isRight ?'success':'msg-fail'">{{isRight ?"手机号可用":"手机号格式错误！"}}</span>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				//因为页面中需要三个变量，所以data中就要有三个变量
				cellphone: "12968290221", //实时接用户在文本框中输入的手机号					
			},
			computed: {
				isRight() {
					//定义正则验证cellphone的内容
					var reg = /^1[3-9]\d{9}$/;
					//如果用正则验证cellphone的内容通过
					return reg.test(this.cellphone);
				},
			},
		});
		//测试: 在F12->console->vm.cellphone=12968290224
		//测试: 在F12->console->vm.cellphone=15968290221
	</script>
</body>

</html>